<template>
	<view>
		<view class="bottom-drawer-mask" v-if="showDrawer" @click="closeDrawer"></view>
		<view class="bottom-drawer" v-if="showDrawer">
			<view class="drawer-content custom-drawer-content">
				<view class="drawer-role-row">
					<text class="drawer-role-name">{{ agent.title }}</text>
					<image v-if="gender === 'female'" class="drawer-gender-icon" src="/static/g.png" />
					<image v-if="gender === 'male'" class="drawer-gender-icon" src="/static/n.png" />
				</view>
				<view class="drawer-ai-tip">
					<image class="drawer-ai-icon" src="/static/stra111.png" />
					<text class="drawer-ai-text">此形象角色由用户使用AI技术生成</text>
				</view>

				<view class="drawer-intro-block1">
					<view class="drawer-intro-header">
						<image class="drawer-intro-icon" src="/static/create_ai_icon.png" />
						<text class="drawer-intro-title">开场白</text>
					</view>
					<view class="drawer-intro-text">{{ agent.prologue }}</view>
				</view>

				<view class="drawer-intro-block">
					<view class="drawer-intro-header">
						<image class="drawer-intro-icon" src="/static/create_ai_icon.png" />
						<text class="drawer-intro-title">公司名称</text>
					</view>
					<view class="drawer-intro-text">{{ agent.company_name }}</view>
				</view>

				<!-- <view class="drawer-hotdance-block">
					<view class="drawer-hotdance-header">
						<image class="drawer-hotdance-icon" src="/static/create_ai_icon.png" />
						<text class="drawer-hotdance-title">热门舞蹈</text>
					</view>
					<scroll-view class="drawer-hotdance-list-scroll" scroll-x>
						<view class="drawer-hotdance-list">
							<div v-for="(item, idx) in agent.showqueryg" :key="idx" class="drawer-hotdance-item">{{ item }}</div>
						</view>
					</scroll-view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showDrawer: {
				type: Boolean,
				default: false,
			},
			gender: {
				type: String,
				default: "male",
			},
			agent: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				Openingremarks: "简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介",
				introText: "简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介",
				hotDanceList: [
					"/static/dance1.jpg",
					"/static/dance2.jpg",
					"/static/dance3.jpg",
					"/static/dance4.jpg",
					"/static/dance3.jpg",
					"/static/dance4.jpg",
					"/static/dance3.jpg",
					"/static/dance4.jpg",
					"/static/dance3.jpg",
					"/static/dance4.jpg",
				],
			}
		},
		methods: {
			closeDrawer() {
				this.$emit("update:showDrawer", false)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bottom-drawer-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 9998;
	}

	.bottom-drawer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background: transparent;
		display: flex;
		justify-content: center;
		animation: drawerUp 0.3s;
	}

	.drawer-content {
		width: 100vw;
		max-width: 750rpx;
		background: #000000;
		border-top-left-radius: 38rpx;
		border-top-right-radius: 38rpx;
		// min-height: 1300rpx;
		padding-bottom: env(safe-area-inset-bottom);
		animation: drawerContentUp 0.3s;
	}

	@keyframes drawerUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	@keyframes drawerContentUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.custom-drawer-content {
		background: #000;
		border-radius: 32rpx 32rpx 0 0;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 46rpx 23rpx;
	}

	.drawer-role-row {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.drawer-role-name {
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		margin-right: 18rpx;
	}

	.drawer-gender-icon {
		width: 38.46rpx;
		height: 38.46rpx;
		margin-right: 12rpx;
	}

	.drawer-ai-tip {
		width:228px;
		height: 69.23rpx;
		display: flex;
		align-items: center;
		background: url("/static/bg1111.png") no-repeat center center;
		background-size: cover;
		padding: 0 24rpx;
	}

	.drawer-ai-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.drawer-ai-text {
		color: rgba(255, 255, 255, 0.85);
		font-size: 23rpx;
		font-weight: 400;
	}

	.drawer-intro-block {
		background: #232323;
		border-radius: 18rpx;
		padding: 32rpx 30rpx;
		width: 100vw;
		max-width: 703rpx;
		margin: 23rpx auto;
		display: flex;
		flex-direction: column;
	}

	.drawer-intro-block1 {
		background: #232323;
		border-radius: 18rpx;
		padding: 32rpx 30rpx;
		width: 100vw;
		max-width: 703rpx;
		margin: 23rpx auto 0 auto;
		display: flex;
		flex-direction: column;
	}

	.drawer-intro-header {
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.drawer-intro-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.drawer-intro-title {
		color: #bfc2c7;
		font-size: 30rpx;
		font-weight: bold;
	}

	.drawer-intro-text {
		color: #fff;
		font-size: 26rpx;
		line-height: 1.7;
		word-break: break-all;
	}

	.drawer-hotdance-block {
		background: #232323;
		border-radius: 18rpx;
		padding: 32rpx 30rpx 28rpx 30rpx;
		width: 100vw;
		max-width: 703rpx;
		display: flex;
		flex-direction: column;
	}

	.drawer-hotdance-header {
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.drawer-hotdance-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.drawer-hotdance-title {
		color: #bfc2c7;
		font-size: 30rpx;
		font-weight: bold;
	}

	.drawer-hotdance-list-scroll {
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}

	.drawer-hotdance-list {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
		margin-top: 8rpx;
		padding-bottom: 8rpx;
	}

	.drawer-hotdance-item {
		padding: 8rpx 24rpx;
		border-radius: 12rpx;
		background: #111;
		flex-shrink: 0;
	}
</style>